
<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
      
      
        <link rel="prev" href="../03_jQuery/index.html">
      
      
        <link rel="next" href="../03_Vue.js%E5%9F%BA%E7%A1%80/index.html">
      
      <link rel="icon" href="../assets/images/favicon.png">
      <meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.1.3">
    
    
      
        <title>03 Bootstrap - 基于WEB的应用程序开发-实验指导书</title>
      
    
    
      <link rel="stylesheet" href="../assets/stylesheets/main.c4a75a56.min.css">
      
        
        <link rel="stylesheet" href="../assets/stylesheets/palette.a0c5b2b5.min.css">
      
      

    
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="../assets/stylesheets/extra.css">
    
    <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      

    
    
    
  </head>
  
  
    
    
      
    
    
    
    
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="purple" data-md-color-accent="">
  
    
    
      <script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script>
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#bootstrap" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

  

<header class="md-header md-header--shadow" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href=".." title="基于WEB的应用程序开发-实验指导书" class="md-header__button md-logo" aria-label="基于WEB的应用程序开发-实验指导书" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            基于WEB的应用程序开发-实验指导书
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              03 Bootstrap
            
          </span>
        </div>
      </div>
    </div>
    
      <form class="md-header__option" data-md-component="palette">
        
          
          <input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="purple" data-md-color-accent=""  aria-label="夜间模式"  type="radio" name="__palette" id="__palette_1">
          
            <label class="md-header__button md-icon" title="夜间模式" for="__palette_2" hidden>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5c-.84 0-1.65.15-2.39.42L12 2M3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29L3.34 7m.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14L3.36 17M20.65 7l-1.77 3.79a7.023 7.023 0 0 0-2.38-4.15l4.15.36m-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29L20.64 17M12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44L12 22Z"/></svg>
            </label>
          
        
          
          <input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="teal" data-md-color-accent=""  aria-label="日间模式"  type="radio" name="__palette" id="__palette_2">
          
            <label class="md-header__button md-icon" title="日间模式" for="__palette_1" hidden>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3 3.19.09m3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95 2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31Z"/></svg>
            </label>
          
        
      </form>
    
    
    
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    


<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href=".." title="基于WEB的应用程序开发-实验指导书" class="md-nav__button md-logo" aria-label="基于WEB的应用程序开发-实验指导书" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>

    </a>
    基于WEB的应用程序开发-实验指导书
  </label>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="../03_Javascript%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        03 Javascript基础
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="../03_Javascript%E9%AB%98%E7%BA%A7%E5%AE%9E%E9%AA%8C/index.html" class="md-nav__link">
        03 Javascript高级实验
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="../03_jQuery/index.html" class="md-nav__link">
        03 jQuery
      </a>
    </li>
  

    
      
      
      

  
  
    
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
        
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          03 Bootstrap
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="index.html" class="md-nav__link md-nav__link--active">
        03 Bootstrap
      </a>
      
        

  

<nav class="md-nav md-nav--secondary" aria-label=" ">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
       
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#1" class="md-nav__link">
    1 实验类型
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#2" class="md-nav__link">
    2 实验目的
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#3" class="md-nav__link">
    3 实验内容与要求
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#4" class="md-nav__link">
    4 实验环境
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#5" class="md-nav__link">
    5 步骤
  </a>
  
    <nav class="md-nav" aria-label="5 步骤">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_1" class="md-nav__link">
    容器
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_2" class="md-nav__link">
    网格
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_3" class="md-nav__link">
    文字排版
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_4" class="md-nav__link">
    图片
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_5" class="md-nav__link">
    综合
  </a>
  
    <nav class="md-nav" aria-label="综合">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_6" class="md-nav__link">
    导航菜单
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_7" class="md-nav__link">
    对话框
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_8" class="md-nav__link">
    表单与表格
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#6" class="md-nav__link">
    6. 思考题
  </a>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="../03_Vue.js%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        03 Vue.js
      </a>
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

  

<nav class="md-nav md-nav--secondary" aria-label=" ">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
       
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#1" class="md-nav__link">
    1 实验类型
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#2" class="md-nav__link">
    2 实验目的
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#3" class="md-nav__link">
    3 实验内容与要求
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#4" class="md-nav__link">
    4 实验环境
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#5" class="md-nav__link">
    5 步骤
  </a>
  
    <nav class="md-nav" aria-label="5 步骤">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_1" class="md-nav__link">
    容器
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_2" class="md-nav__link">
    网格
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_3" class="md-nav__link">
    文字排版
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_4" class="md-nav__link">
    图片
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_5" class="md-nav__link">
    综合
  </a>
  
    <nav class="md-nav" aria-label="综合">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#_6" class="md-nav__link">
    导航菜单
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_7" class="md-nav__link">
    对话框
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_8" class="md-nav__link">
    表单与表格
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#6" class="md-nav__link">
    6. 思考题
  </a>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  


<h1 id="bootstrap">Bootstrap实验</h1>
<h2 id="1">1 实验类型</h2>
<p>验证型，2学时，必选实验</p>
<h2 id="2">2 实验目的</h2>
<p>熟悉Bootstrap布局；熟悉Bootstrap页面内容；熟悉Bootstrap表单；熟悉Bootstrap组件。</p>
<h2 id="3">3 实验内容与要求</h2>
<p>使用Bootstrap的不同模块完成若干验证实验。</p>
<h2 id="4">4 实验环境</h2>
<p><code>Microsoft Edge/Chrome/Firefox</code>等浏览器，<code>Visual Studio Code</code>，<code>bootstrap-5.2.3-dist</code></p>
<h2 id="5">5 步骤</h2>
<ol>
<li>
<p>创建工作目录<code>${MyDir}\bootstrap</code></p>
</li>
<li>
<p>将<code>bootstrap-5.2.3-dist</code>解压到工作目录</p>
</li>
</ol>
<h3 id="_1">容器</h3>
<p>创建针对不同断点的<code>&lt;div&gt;</code>，展示Bootstrap容器的响应式效果。</p>
<ol>
<li>
<p>编写Html代码(<code>bs_container-01.html</code>)，实现Bootstrap不同容器，参考代码如下：</p>
<!--<iframe src="./src/bs_container-01.html" frameborder="0" width="100%" height="300"></iframe>-->
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">bs_container-01.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-0-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-0-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-0-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-0-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-0-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-0-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-0-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-0-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-0-10">10</a></span>
<span class="normal"><a href="#__codelineno-0-11">11</a></span>
<span class="normal"><a href="#__codelineno-0-12">12</a></span>
<span class="normal"><a href="#__codelineno-0-13">13</a></span>
<span class="normal"><a href="#__codelineno-0-14">14</a></span>
<span class="normal"><a href="#__codelineno-0-15">15</a></span>
<span class="normal"><a href="#__codelineno-0-16">16</a></span>
<span class="normal"><a href="#__codelineno-0-17">17</a></span>
<span class="normal"><a href="#__codelineno-0-18">18</a></span>
<span class="normal"><a href="#__codelineno-0-19">19</a></span>
<span class="normal"><a href="#__codelineno-0-20">20</a></span>
<span class="normal"><a href="#__codelineno-0-21">21</a></span>
<span class="normal"><a href="#__codelineno-0-22">22</a></span>
<span class="normal"><a href="#__codelineno-0-23">23</a></span>
<span class="normal"><a href="#__codelineno-0-24">24</a></span>
<span class="normal"><a href="#__codelineno-0-25">25</a></span>
<span class="normal"><a href="#__codelineno-0-26">26</a></span>
<span class="normal"><a href="#__codelineno-0-27">27</a></span>
<span class="normal"><a href="#__codelineno-0-28">28</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="cp">&lt;!doctype html&gt;</span>
<a id="__codelineno-0-2" name="__codelineno-0-2"></a><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-0-3" name="__codelineno-0-3"></a>
<a id="__codelineno-0-4" name="__codelineno-0-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-0-5" name="__codelineno-0-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-0-6" name="__codelineno-0-6"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-0-7" name="__codelineno-0-7"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Bootstrap demo<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-0-8" name="__codelineno-0-8"></a>  <span class="cm">&lt;!-- 引入CSS --&gt;</span>
<a id="__codelineno-0-9" name="__codelineno-0-9"></a>  <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;bootstrap/css/bootstrap.min.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-0-10" name="__codelineno-0-10"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-0-11" name="__codelineno-0-11"></a>
<a id="__codelineno-0-12" name="__codelineno-0-12"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-0-13" name="__codelineno-0-13"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container pt-3&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-0-14" name="__codelineno-0-14"></a>    <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>响应式容器<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<a id="__codelineno-0-15" name="__codelineno-0-15"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>重置浏览器大小查看效果.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-0-16" name="__codelineno-0-16"></a>  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-0-17" name="__codelineno-0-17"></a>
<a id="__codelineno-0-18" name="__codelineno-0-18"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container-sm border&quot;</span><span class="p">&gt;</span>.container-sm<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-0-19" name="__codelineno-0-19"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container-md mt-3 border&quot;</span><span class="p">&gt;</span>.container-md<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-0-20" name="__codelineno-0-20"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container-lg mt-3 border&quot;</span><span class="p">&gt;</span>.container-lg<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-0-21" name="__codelineno-0-21"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container-xl mt-3 border&quot;</span><span class="p">&gt;</span>.container-xl<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-0-22" name="__codelineno-0-22"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container-xxl mt-3 border&quot;</span><span class="p">&gt;</span>.container-xxl<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-0-23" name="__codelineno-0-23"></a>
<a id="__codelineno-0-24" name="__codelineno-0-24"></a>  <span class="cm">&lt;!-- 引入JS --&gt;</span>
<a id="__codelineno-0-25" name="__codelineno-0-25"></a>  <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;bootstrap-5.2.3-dist/js/bootstrap.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-0-26" name="__codelineno-0-26"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-0-27" name="__codelineno-0-27"></a>
<a id="__codelineno-0-28" name="__codelineno-0-28"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>在浏览器中打开页面，改变浏览器窗口大小并观察效果</p>
</li>
</ol>
<h3 id="_2">网格</h3>
<p>利用Bootstrap网格系统进行页面布局。</p>
<ol>
<li>
<p>编写Html代码(<code>bs_grid.html</code>)，实现Bootstrap网格布局，参考代码如下：</p>
<!--<iframe src="./src/bs_grid.html" frameborder="0" width="100%" height="200"></iframe>-->
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">bs_grid.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-1-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-1-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-1-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-1-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-1-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-1-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-1-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-1-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-1-10">10</a></span>
<span class="normal"><a href="#__codelineno-1-11">11</a></span>
<span class="normal"><a href="#__codelineno-1-12">12</a></span>
<span class="normal"><a href="#__codelineno-1-13">13</a></span>
<span class="normal"><a href="#__codelineno-1-14">14</a></span>
<span class="normal"><a href="#__codelineno-1-15">15</a></span>
<span class="normal"><a href="#__codelineno-1-16">16</a></span>
<span class="normal"><a href="#__codelineno-1-17">17</a></span>
<span class="normal"><a href="#__codelineno-1-18">18</a></span>
<span class="normal"><a href="#__codelineno-1-19">19</a></span>
<span class="normal"><a href="#__codelineno-1-20">20</a></span>
<span class="normal"><a href="#__codelineno-1-21">21</a></span>
<span class="normal"><a href="#__codelineno-1-22">22</a></span>
<span class="normal"><a href="#__codelineno-1-23">23</a></span>
<span class="normal"><a href="#__codelineno-1-24">24</a></span>
<span class="normal"><a href="#__codelineno-1-25">25</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a><span class="cp">&lt;!doctype html&gt;</span>
<a id="__codelineno-1-2" name="__codelineno-1-2"></a><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-1-3" name="__codelineno-1-3"></a>
<a id="__codelineno-1-4" name="__codelineno-1-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-1-5" name="__codelineno-1-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-1-6" name="__codelineno-1-6"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-1-7" name="__codelineno-1-7"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Bootstrap demo<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-1-8" name="__codelineno-1-8"></a>  <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;bootstrap/css/bootstrap.min.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-1-9" name="__codelineno-1-9"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-1-10" name="__codelineno-1-10"></a>
<a id="__codelineno-1-11" name="__codelineno-1-11"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-1-12" name="__codelineno-1-12"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container-fluid mt-3&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-1-13" name="__codelineno-1-13"></a>    <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>创建相等宽度的列<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<a id="__codelineno-1-14" name="__codelineno-1-14"></a>    <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>创建三个相等宽度的列! 尝试在 class=&quot;row&quot; 的 div 中添加新的 class=&quot;col&quot; div，会显示四个等宽的列。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-1-15" name="__codelineno-1-15"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;row&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-1-16" name="__codelineno-1-16"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;col p-3 bg-primary text-white&quot;</span><span class="p">&gt;</span>.col<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-1-17" name="__codelineno-1-17"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;col p-3 bg-dark text-white&quot;</span><span class="p">&gt;</span>.col<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-1-18" name="__codelineno-1-18"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;col p-3 bg-primary text-white&quot;</span><span class="p">&gt;</span>.col<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-1-19" name="__codelineno-1-19"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-1-20" name="__codelineno-1-20"></a>  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-1-21" name="__codelineno-1-21"></a>
<a id="__codelineno-1-22" name="__codelineno-1-22"></a>  <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;bootstrap-5.2.3-dist/js/bootstrap.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-1-23" name="__codelineno-1-23"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-1-24" name="__codelineno-1-24"></a>
<a id="__codelineno-1-25" name="__codelineno-1-25"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>在浏览器中打开页面，改变浏览器窗口大小并观察效果</p>
</li>
</ol>
<h3 id="_3">文字排版</h3>
<p>利用Bootstrap网格系统进行页面布局。</p>
<ol>
<li>
<p>编写Html代码(<code>bs_topography-heading.html</code>)，实现Bootstrap文字排版，参考代码如下：</p>
<!--<iframe src="./src/bs_topography-heading.html" frameborder="0" width="100%" height="300"></iframe>-->
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">bs_topography-heading.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-2-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-2-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-2-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-2-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-2-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-2-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-2-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-2-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-2-10">10</a></span>
<span class="normal"><a href="#__codelineno-2-11">11</a></span>
<span class="normal"><a href="#__codelineno-2-12">12</a></span>
<span class="normal"><a href="#__codelineno-2-13">13</a></span>
<span class="normal"><a href="#__codelineno-2-14">14</a></span>
<span class="normal"><a href="#__codelineno-2-15">15</a></span>
<span class="normal"><a href="#__codelineno-2-16">16</a></span>
<span class="normal"><a href="#__codelineno-2-17">17</a></span>
<span class="normal"><a href="#__codelineno-2-18">18</a></span>
<span class="normal"><a href="#__codelineno-2-19">19</a></span>
<span class="normal"><a href="#__codelineno-2-20">20</a></span>
<span class="normal"><a href="#__codelineno-2-21">21</a></span>
<span class="normal"><a href="#__codelineno-2-22">22</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a><span class="cp">&lt;!doctype html&gt;</span>
<a id="__codelineno-2-2" name="__codelineno-2-2"></a><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-2-3" name="__codelineno-2-3"></a>
<a id="__codelineno-2-4" name="__codelineno-2-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-2-5" name="__codelineno-2-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-2-6" name="__codelineno-2-6"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-2-7" name="__codelineno-2-7"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Bootstrap demo<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-2-8" name="__codelineno-2-8"></a>  <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;bootstrap/css/bootstrap.min.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-2-9" name="__codelineno-2-9"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-2-10" name="__codelineno-2-10"></a>
<a id="__codelineno-2-11" name="__codelineno-2-11"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-2-12" name="__codelineno-2-12"></a>  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>h1. Bootstrap heading<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<a id="__codelineno-2-13" name="__codelineno-2-13"></a>  <span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>h2. Bootstrap heading<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<a id="__codelineno-2-14" name="__codelineno-2-14"></a>  <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>h3. Bootstrap heading<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
<a id="__codelineno-2-15" name="__codelineno-2-15"></a>  <span class="p">&lt;</span><span class="nt">h4</span><span class="p">&gt;</span>h4. Bootstrap heading<span class="p">&lt;/</span><span class="nt">h4</span><span class="p">&gt;</span>
<a id="__codelineno-2-16" name="__codelineno-2-16"></a>  <span class="p">&lt;</span><span class="nt">h5</span><span class="p">&gt;</span>h5. Bootstrap heading<span class="p">&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>
<a id="__codelineno-2-17" name="__codelineno-2-17"></a>  <span class="p">&lt;</span><span class="nt">h6</span><span class="p">&gt;</span>h6. Bootstrap heading<span class="p">&lt;/</span><span class="nt">h6</span><span class="p">&gt;</span>
<a id="__codelineno-2-18" name="__codelineno-2-18"></a>
<a id="__codelineno-2-19" name="__codelineno-2-19"></a>  <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;bootstrap-5.2.3-dist/js/bootstrap.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-2-20" name="__codelineno-2-20"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-2-21" name="__codelineno-2-21"></a>
<a id="__codelineno-2-22" name="__codelineno-2-22"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>在浏览器中打开页面，改变浏览器窗口大小并观察效果</p>
</li>
</ol>
<h3 id="_4">图片</h3>
<p>利用Bootstrap在一行中放入三个缩略图(图片自供)。</p>
<ol>
<li>
<p>编写Html代码(<code>bs_image.html</code>)，实现Bootstrap缩略图，参考代码如下：</p>
<!--<iframe src="./src/bs_image.html" frameborder="0" width="100%" height="300"></iframe>-->
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">bs_image.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-3-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-3-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-3-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-3-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-3-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-3-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-3-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-3-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-3-10">10</a></span>
<span class="normal"><a href="#__codelineno-3-11">11</a></span>
<span class="normal"><a href="#__codelineno-3-12">12</a></span>
<span class="normal"><a href="#__codelineno-3-13">13</a></span>
<span class="normal"><a href="#__codelineno-3-14">14</a></span>
<span class="normal"><a href="#__codelineno-3-15">15</a></span>
<span class="normal"><a href="#__codelineno-3-16">16</a></span>
<span class="normal"><a href="#__codelineno-3-17">17</a></span>
<span class="normal"><a href="#__codelineno-3-18">18</a></span>
<span class="normal"><a href="#__codelineno-3-19">19</a></span>
<span class="normal"><a href="#__codelineno-3-20">20</a></span>
<span class="normal"><a href="#__codelineno-3-21">21</a></span>
<span class="normal"><a href="#__codelineno-3-22">22</a></span>
<span class="normal"><a href="#__codelineno-3-23">23</a></span>
<span class="normal"><a href="#__codelineno-3-24">24</a></span>
<span class="normal"><a href="#__codelineno-3-25">25</a></span>
<span class="normal"><a href="#__codelineno-3-26">26</a></span>
<span class="normal"><a href="#__codelineno-3-27">27</a></span>
<span class="normal"><a href="#__codelineno-3-28">28</a></span>
<span class="normal"><a href="#__codelineno-3-29">29</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a><span class="cp">&lt;!doctype html&gt;</span>
<a id="__codelineno-3-2" name="__codelineno-3-2"></a><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-3-3" name="__codelineno-3-3"></a>
<a id="__codelineno-3-4" name="__codelineno-3-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-3-5" name="__codelineno-3-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-3-6" name="__codelineno-3-6"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-3-7" name="__codelineno-3-7"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Bootstrap demo<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-3-8" name="__codelineno-3-8"></a>  <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;bootstrap/css/bootstrap.min.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-3-9" name="__codelineno-3-9"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-3-10" name="__codelineno-3-10"></a>
<a id="__codelineno-3-11" name="__codelineno-3-11"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-3-12" name="__codelineno-3-12"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container mt-3&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-3-13" name="__codelineno-3-13"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;row&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-3-14" name="__codelineno-3-14"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;col&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-3-15" name="__codelineno-3-15"></a>        <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;bootstrap-stack.png&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;img-thumbnail&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;...&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-3-16" name="__codelineno-3-16"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-3-17" name="__codelineno-3-17"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;col&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-3-18" name="__codelineno-3-18"></a>        <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;bootstrap-stack.png&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;img-thumbnail&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;...&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-3-19" name="__codelineno-3-19"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-3-20" name="__codelineno-3-20"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;col&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-3-21" name="__codelineno-3-21"></a>        <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;bootstrap-stack.png&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;img-thumbnail&quot;</span> <span class="na">alt</span><span class="o">=</span><span class="s">&quot;...&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-3-22" name="__codelineno-3-22"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-3-23" name="__codelineno-3-23"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-3-24" name="__codelineno-3-24"></a>  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-3-25" name="__codelineno-3-25"></a>
<a id="__codelineno-3-26" name="__codelineno-3-26"></a>  <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;bootstrap-5.2.3-dist/js/bootstrap.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-3-27" name="__codelineno-3-27"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-3-28" name="__codelineno-3-28"></a>
<a id="__codelineno-3-29" name="__codelineno-3-29"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>在浏览器中打开页面，改变浏览器窗口大小并观察效果</p>
</li>
</ol>
<h3 id="_5">综合</h3>
<h4 id="_6">导航菜单</h4>
<p>使用Bootstrap实现页面顶部的导航菜单</p>
<ol>
<li>创建<code>nav.html</code>，用<strong>Bootstrap</strong>创建导航菜单，尝试改变菜单的外观，参考代码如下：</li>
</ol>
<!--<iframe src="./src/bs_nav.html" frameborder="0" width="100%" height="200"></iframe>-->
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">bs_nav.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-4-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-4-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-4-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-4-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-4-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-4-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-4-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-4-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-4-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-4-10">10</a></span>
<span class="normal"><a href="#__codelineno-4-11">11</a></span>
<span class="normal"><a href="#__codelineno-4-12">12</a></span>
<span class="normal"><a href="#__codelineno-4-13">13</a></span>
<span class="normal"><a href="#__codelineno-4-14">14</a></span>
<span class="normal"><a href="#__codelineno-4-15">15</a></span>
<span class="normal"><a href="#__codelineno-4-16">16</a></span>
<span class="normal"><a href="#__codelineno-4-17">17</a></span>
<span class="normal"><a href="#__codelineno-4-18">18</a></span>
<span class="normal"><a href="#__codelineno-4-19">19</a></span>
<span class="normal"><a href="#__codelineno-4-20">20</a></span>
<span class="normal"><a href="#__codelineno-4-21">21</a></span>
<span class="normal"><a href="#__codelineno-4-22">22</a></span>
<span class="normal"><a href="#__codelineno-4-23">23</a></span>
<span class="normal"><a href="#__codelineno-4-24">24</a></span>
<span class="normal"><a href="#__codelineno-4-25">25</a></span>
<span class="normal"><a href="#__codelineno-4-26">26</a></span>
<span class="normal"><a href="#__codelineno-4-27">27</a></span>
<span class="normal"><a href="#__codelineno-4-28">28</a></span>
<span class="normal"><a href="#__codelineno-4-29">29</a></span>
<span class="normal"><a href="#__codelineno-4-30">30</a></span>
<span class="normal"><a href="#__codelineno-4-31">31</a></span>
<span class="normal"><a href="#__codelineno-4-32">32</a></span>
<span class="normal"><a href="#__codelineno-4-33">33</a></span>
<span class="normal"><a href="#__codelineno-4-34">34</a></span>
<span class="normal"><a href="#__codelineno-4-35">35</a></span>
<span class="normal"><a href="#__codelineno-4-36">36</a></span>
<span class="normal"><a href="#__codelineno-4-37">37</a></span>
<span class="normal"><a href="#__codelineno-4-38">38</a></span>
<span class="normal"><a href="#__codelineno-4-39">39</a></span>
<span class="normal"><a href="#__codelineno-4-40">40</a></span>
<span class="normal"><a href="#__codelineno-4-41">41</a></span>
<span class="normal"><a href="#__codelineno-4-42">42</a></span>
<span class="normal"><a href="#__codelineno-4-43">43</a></span>
<span class="normal"><a href="#__codelineno-4-44">44</a></span>
<span class="normal"><a href="#__codelineno-4-45">45</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1"></a><span class="cp">&lt;!doctype html&gt;</span>
<a id="__codelineno-4-2" name="__codelineno-4-2"></a><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-3" name="__codelineno-4-3"></a>
<a id="__codelineno-4-4" name="__codelineno-4-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-4-5" name="__codelineno-4-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-6" name="__codelineno-4-6"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-7" name="__codelineno-4-7"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>导航<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-4-8" name="__codelineno-4-8"></a>  <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;bootstrap/css/bootstrap.min.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-9" name="__codelineno-4-9"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-4-10" name="__codelineno-4-10"></a>
<a id="__codelineno-4-11" name="__codelineno-4-11"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-4-12" name="__codelineno-4-12"></a>  <span class="p">&lt;</span><span class="nt">nav</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;navbar bg-dark navbar-expand-sm bg-body-tertiary&quot;</span> <span class="na">data-bs-theme</span><span class="o">=</span><span class="s">&quot;dark&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-13" name="__codelineno-4-13"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container-fluid&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-14" name="__codelineno-4-14"></a>      <span class="cm">&lt;!--&lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;导航&lt;/a&gt; --&gt;</span>
<a id="__codelineno-4-15" name="__codelineno-4-15"></a>      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;navbar-toggler&quot;</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">&quot;collapse&quot;</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">&quot;#navbarSupportedContent&quot;</span>
<a id="__codelineno-4-16" name="__codelineno-4-16"></a>        <span class="na">aria-controls</span><span class="o">=</span><span class="s">&quot;navbarSupportedContent&quot;</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">&quot;false&quot;</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">&quot;Toggle navigation&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-17" name="__codelineno-4-17"></a>        <span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;navbar-toggler-icon&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
<a id="__codelineno-4-18" name="__codelineno-4-18"></a>      <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<a id="__codelineno-4-19" name="__codelineno-4-19"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;collapse navbar-collapse&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;navbarSupportedContent&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-20" name="__codelineno-4-20"></a>        <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;navbar-nav&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-21" name="__codelineno-4-21"></a>          <span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;nav-item&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-22" name="__codelineno-4-22"></a>            <span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;nav-link active&quot;</span> <span class="na">aria-current</span><span class="o">=</span><span class="s">&quot;page&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>首页<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-4-23" name="__codelineno-4-23"></a>          <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<a id="__codelineno-4-24" name="__codelineno-4-24"></a>          <span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;nav-item&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-25" name="__codelineno-4-25"></a>            <span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;nav-link&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>新闻<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-4-26" name="__codelineno-4-26"></a>          <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<a id="__codelineno-4-27" name="__codelineno-4-27"></a>          <span class="p">&lt;</span><span class="nt">li</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;nav-item dropdown&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-28" name="__codelineno-4-28"></a>            <span class="p">&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;nav-link dropdown-toggle&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span> <span class="na">role</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">&quot;dropdown&quot;</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">&quot;false&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-29" name="__codelineno-4-29"></a>              运动
<a id="__codelineno-4-30" name="__codelineno-4-30"></a>            <span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
<a id="__codelineno-4-31" name="__codelineno-4-31"></a>            <span class="p">&lt;</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;dropdown-menu&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-4-32" name="__codelineno-4-32"></a>              <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;dropdown-item&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>足球<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<a id="__codelineno-4-33" name="__codelineno-4-33"></a>              <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;dropdown-item&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>篮球<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<a id="__codelineno-4-34" name="__codelineno-4-34"></a>              <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;dropdown-item&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>排球<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<a id="__codelineno-4-35" name="__codelineno-4-35"></a>            <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
<a id="__codelineno-4-36" name="__codelineno-4-36"></a>          <span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
<a id="__codelineno-4-37" name="__codelineno-4-37"></a>        <span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
<a id="__codelineno-4-38" name="__codelineno-4-38"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-4-39" name="__codelineno-4-39"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-4-40" name="__codelineno-4-40"></a>  <span class="p">&lt;/</span><span class="nt">nav</span><span class="p">&gt;</span>
<a id="__codelineno-4-41" name="__codelineno-4-41"></a>
<a id="__codelineno-4-42" name="__codelineno-4-42"></a>  <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;bootstrap-5.2.3-dist/js/bootstrap.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-4-43" name="__codelineno-4-43"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-4-44" name="__codelineno-4-44"></a>
<a id="__codelineno-4-45" name="__codelineno-4-45"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h4 id="_7">对话框</h4>
<p>使用Bootstrap实现具有标题、正文和关闭按钮的模式对话框，参考代码如下：</p>
<!--<iframe src="./src/bs_model.html" frameborder="0" width="100%" height="300"></iframe>-->
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">bs_model.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-5-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-5-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-5-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-5-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-5-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-5-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-5-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-5-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-5-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-5-10">10</a></span>
<span class="normal"><a href="#__codelineno-5-11">11</a></span>
<span class="normal"><a href="#__codelineno-5-12">12</a></span>
<span class="normal"><a href="#__codelineno-5-13">13</a></span>
<span class="normal"><a href="#__codelineno-5-14">14</a></span>
<span class="normal"><a href="#__codelineno-5-15">15</a></span>
<span class="normal"><a href="#__codelineno-5-16">16</a></span>
<span class="normal"><a href="#__codelineno-5-17">17</a></span>
<span class="normal"><a href="#__codelineno-5-18">18</a></span>
<span class="normal"><a href="#__codelineno-5-19">19</a></span>
<span class="normal"><a href="#__codelineno-5-20">20</a></span>
<span class="normal"><a href="#__codelineno-5-21">21</a></span>
<span class="normal"><a href="#__codelineno-5-22">22</a></span>
<span class="normal"><a href="#__codelineno-5-23">23</a></span>
<span class="normal"><a href="#__codelineno-5-24">24</a></span>
<span class="normal"><a href="#__codelineno-5-25">25</a></span>
<span class="normal"><a href="#__codelineno-5-26">26</a></span>
<span class="normal"><a href="#__codelineno-5-27">27</a></span>
<span class="normal"><a href="#__codelineno-5-28">28</a></span>
<span class="normal"><a href="#__codelineno-5-29">29</a></span>
<span class="normal"><a href="#__codelineno-5-30">30</a></span>
<span class="normal"><a href="#__codelineno-5-31">31</a></span>
<span class="normal"><a href="#__codelineno-5-32">32</a></span>
<span class="normal"><a href="#__codelineno-5-33">33</a></span>
<span class="normal"><a href="#__codelineno-5-34">34</a></span>
<span class="normal"><a href="#__codelineno-5-35">35</a></span>
<span class="normal"><a href="#__codelineno-5-36">36</a></span>
<span class="normal"><a href="#__codelineno-5-37">37</a></span>
<span class="normal"><a href="#__codelineno-5-38">38</a></span>
<span class="normal"><a href="#__codelineno-5-39">39</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1"></a><span class="cp">&lt;!doctype html&gt;</span>
<a id="__codelineno-5-2" name="__codelineno-5-2"></a><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-3" name="__codelineno-5-3"></a>
<a id="__codelineno-5-4" name="__codelineno-5-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-5-5" name="__codelineno-5-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-6" name="__codelineno-5-6"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-7" name="__codelineno-5-7"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>模式对话框<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-5-8" name="__codelineno-5-8"></a>  <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;bootstrap/css/bootstrap.min.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-9" name="__codelineno-5-9"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-5-10" name="__codelineno-5-10"></a>
<a id="__codelineno-5-11" name="__codelineno-5-11"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-5-12" name="__codelineno-5-12"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container-fluid mt-3&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-13" name="__codelineno-5-13"></a>    <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary&quot;</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">&quot;modal&quot;</span> <span class="na">data-bs-target</span><span class="o">=</span><span class="s">&quot;#exampleModal&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-14" name="__codelineno-5-14"></a>      打开模式对话框
<a id="__codelineno-5-15" name="__codelineno-5-15"></a>    <span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<a id="__codelineno-5-16" name="__codelineno-5-16"></a>
<a id="__codelineno-5-17" name="__codelineno-5-17"></a>    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;modal fade&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;exampleModal&quot;</span> <span class="na">tabindex</span><span class="o">=</span><span class="s">&quot;-1&quot;</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">&quot;exampleModalLabel&quot;</span> <span class="na">aria-hidden</span><span class="o">=</span><span class="s">&quot;true&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-18" name="__codelineno-5-18"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;modal-dialog&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-19" name="__codelineno-5-19"></a>        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;modal-content&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-20" name="__codelineno-5-20"></a>          <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;modal-header&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-21" name="__codelineno-5-21"></a>            <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;modal-title&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;exampleModalLabel&quot;</span><span class="p">&gt;</span>打开模式对话框<span class="p">&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>
<a id="__codelineno-5-22" name="__codelineno-5-22"></a>            <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn-close&quot;</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">&quot;modal&quot;</span> <span class="na">aria-label</span><span class="o">=</span><span class="s">&quot;Close&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<a id="__codelineno-5-23" name="__codelineno-5-23"></a>          <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-5-24" name="__codelineno-5-24"></a>          <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;modal-body&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-25" name="__codelineno-5-25"></a>            哇！这是正文
<a id="__codelineno-5-26" name="__codelineno-5-26"></a>          <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-5-27" name="__codelineno-5-27"></a>          <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;modal-footer&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-5-28" name="__codelineno-5-28"></a>            <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-secondary&quot;</span> <span class="na">data-bs-dismiss</span><span class="o">=</span><span class="s">&quot;modal&quot;</span><span class="p">&gt;</span>关闭<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<a id="__codelineno-5-29" name="__codelineno-5-29"></a>            <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;button&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary&quot;</span><span class="p">&gt;</span>保存<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<a id="__codelineno-5-30" name="__codelineno-5-30"></a>          <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-5-31" name="__codelineno-5-31"></a>        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-5-32" name="__codelineno-5-32"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-5-33" name="__codelineno-5-33"></a>    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-5-34" name="__codelineno-5-34"></a>  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-5-35" name="__codelineno-5-35"></a>
<a id="__codelineno-5-36" name="__codelineno-5-36"></a>  <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;bootstrap-5.2.3-dist/js/bootstrap.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-5-37" name="__codelineno-5-37"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-5-38" name="__codelineno-5-38"></a>
<a id="__codelineno-5-39" name="__codelineno-5-39"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<p>在浏览器中打开页面，改变浏览器窗口大小并观察效果</p>
<h4 id="_8">表单与表格</h4>
<p>使用Bootstrap为<strong>课程表</strong>创建表单和表格界面，以下为学生表参考代码：</p>
<blockquote>
<p><strong>注意：</strong>要实验的是<strong>课程表</strong></p>
</blockquote>
<p><strong>表单界面-学生表</strong></p>
<iframe src="./src/stu/STUDENT_form_bootstrap.html" frameborder="0" width="100%" height="550"></iframe>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">stu/STUDENT_form_bootstrap.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-6-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-6-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-6-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-6-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-6-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-6-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-6-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-6-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-6-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-6-10">10</a></span>
<span class="normal"><a href="#__codelineno-6-11">11</a></span>
<span class="normal"><a href="#__codelineno-6-12">12</a></span>
<span class="normal"><a href="#__codelineno-6-13">13</a></span>
<span class="normal"><a href="#__codelineno-6-14">14</a></span>
<span class="normal"><a href="#__codelineno-6-15">15</a></span>
<span class="normal"><a href="#__codelineno-6-16">16</a></span>
<span class="normal"><a href="#__codelineno-6-17">17</a></span>
<span class="normal"><a href="#__codelineno-6-18">18</a></span>
<span class="normal"><a href="#__codelineno-6-19">19</a></span>
<span class="normal"><a href="#__codelineno-6-20">20</a></span>
<span class="normal"><a href="#__codelineno-6-21">21</a></span>
<span class="normal"><a href="#__codelineno-6-22">22</a></span>
<span class="normal"><a href="#__codelineno-6-23">23</a></span>
<span class="normal"><a href="#__codelineno-6-24">24</a></span>
<span class="normal"><a href="#__codelineno-6-25">25</a></span>
<span class="normal"><a href="#__codelineno-6-26">26</a></span>
<span class="normal"><a href="#__codelineno-6-27">27</a></span>
<span class="normal"><a href="#__codelineno-6-28">28</a></span>
<span class="normal"><a href="#__codelineno-6-29">29</a></span>
<span class="normal"><a href="#__codelineno-6-30">30</a></span>
<span class="normal"><a href="#__codelineno-6-31">31</a></span>
<span class="normal"><a href="#__codelineno-6-32">32</a></span>
<span class="normal"><a href="#__codelineno-6-33">33</a></span>
<span class="normal"><a href="#__codelineno-6-34">34</a></span>
<span class="normal"><a href="#__codelineno-6-35">35</a></span>
<span class="normal"><a href="#__codelineno-6-36">36</a></span>
<span class="normal"><a href="#__codelineno-6-37">37</a></span>
<span class="normal"><a href="#__codelineno-6-38">38</a></span>
<span class="normal"><a href="#__codelineno-6-39">39</a></span>
<span class="normal"><a href="#__codelineno-6-40">40</a></span>
<span class="normal"><a href="#__codelineno-6-41">41</a></span>
<span class="normal"><a href="#__codelineno-6-42">42</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-6-2" name="__codelineno-6-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-6-3" name="__codelineno-6-3"></a>
<a id="__codelineno-6-4" name="__codelineno-6-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-6-5" name="__codelineno-6-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-6" name="__codelineno-6-6"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-7" name="__codelineno-6-7"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>学生表<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-6-8" name="__codelineno-6-8"></a>  <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;css/bootstrap.min.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-9" name="__codelineno-6-9"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-6-10" name="__codelineno-6-10"></a>
<a id="__codelineno-6-11" name="__codelineno-6-11"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-6-12" name="__codelineno-6-12"></a>  <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>学生表<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
<a id="__codelineno-6-13" name="__codelineno-6-13"></a>  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;container&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-14" name="__codelineno-6-14"></a>    <span class="p">&lt;</span><span class="nt">form</span> <span class="na">action</span><span class="o">=</span><span class="s">&quot;#&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-15" name="__codelineno-6-15"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;mb-3&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-16" name="__codelineno-6-16"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;no&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-label&quot;</span><span class="p">&gt;</span>学号:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-6-17" name="__codelineno-6-17"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;no&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;no&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入学号..&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-control&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-18" name="__codelineno-6-18"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-6-19" name="__codelineno-6-19"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;mb-3&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-20" name="__codelineno-6-20"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;name&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-label&quot;</span><span class="p">&gt;</span>姓名:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-6-21" name="__codelineno-6-21"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;name&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;name&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入姓名..&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-control&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-22" name="__codelineno-6-22"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-6-23" name="__codelineno-6-23"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;mb-3&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-24" name="__codelineno-6-24"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;gender&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-label&quot;</span><span class="p">&gt;</span>性别:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-6-25" name="__codelineno-6-25"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;gender&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;gender&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入性别..&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-control&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-26" name="__codelineno-6-26"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-6-27" name="__codelineno-6-27"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;mb-3&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-28" name="__codelineno-6-28"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;age&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-label&quot;</span><span class="p">&gt;</span>年龄:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-6-29" name="__codelineno-6-29"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;number&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;age&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;age&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入年龄..&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-control&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-30" name="__codelineno-6-30"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-6-31" name="__codelineno-6-31"></a>      <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;mb-3&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-32" name="__codelineno-6-32"></a>        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&quot;dept&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-label&quot;</span><span class="p">&gt;</span>所在系:<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
<a id="__codelineno-6-33" name="__codelineno-6-33"></a>        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;dept&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;dept&quot;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&quot;请输入所在系..&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-control&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-6-34" name="__codelineno-6-34"></a>      <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-6-35" name="__codelineno-6-35"></a>
<a id="__codelineno-6-36" name="__codelineno-6-36"></a>      <span class="p">&lt;</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;submit&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary&quot;</span><span class="p">&gt;</span>提交<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
<a id="__codelineno-6-37" name="__codelineno-6-37"></a>    <span class="p">&lt;/</span><span class="nt">form</span><span class="p">&gt;</span>
<a id="__codelineno-6-38" name="__codelineno-6-38"></a>  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<a id="__codelineno-6-39" name="__codelineno-6-39"></a>  <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;js/bootstrap.min.js&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-6-40" name="__codelineno-6-40"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-6-41" name="__codelineno-6-41"></a>
<a id="__codelineno-6-42" name="__codelineno-6-42"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<p><strong>表格界面-学生表</strong></p>
<iframe src="./src/stu/STUDENT_table_bootstrap.html" frameborder="0" width="100%" height="270"></iframe>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">stu/STUDENT_table_bootstrap.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-7-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-7-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-7-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-7-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-7-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-7-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-7-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-7-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-7-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-7-10">10</a></span>
<span class="normal"><a href="#__codelineno-7-11">11</a></span>
<span class="normal"><a href="#__codelineno-7-12">12</a></span>
<span class="normal"><a href="#__codelineno-7-13">13</a></span>
<span class="normal"><a href="#__codelineno-7-14">14</a></span>
<span class="normal"><a href="#__codelineno-7-15">15</a></span>
<span class="normal"><a href="#__codelineno-7-16">16</a></span>
<span class="normal"><a href="#__codelineno-7-17">17</a></span>
<span class="normal"><a href="#__codelineno-7-18">18</a></span>
<span class="normal"><a href="#__codelineno-7-19">19</a></span>
<span class="normal"><a href="#__codelineno-7-20">20</a></span>
<span class="normal"><a href="#__codelineno-7-21">21</a></span>
<span class="normal"><a href="#__codelineno-7-22">22</a></span>
<span class="normal"><a href="#__codelineno-7-23">23</a></span>
<span class="normal"><a href="#__codelineno-7-24">24</a></span>
<span class="normal"><a href="#__codelineno-7-25">25</a></span>
<span class="normal"><a href="#__codelineno-7-26">26</a></span>
<span class="normal"><a href="#__codelineno-7-27">27</a></span>
<span class="normal"><a href="#__codelineno-7-28">28</a></span>
<span class="normal"><a href="#__codelineno-7-29">29</a></span>
<span class="normal"><a href="#__codelineno-7-30">30</a></span>
<span class="normal"><a href="#__codelineno-7-31">31</a></span>
<span class="normal"><a href="#__codelineno-7-32">32</a></span>
<span class="normal"><a href="#__codelineno-7-33">33</a></span>
<span class="normal"><a href="#__codelineno-7-34">34</a></span>
<span class="normal"><a href="#__codelineno-7-35">35</a></span>
<span class="normal"><a href="#__codelineno-7-36">36</a></span>
<span class="normal"><a href="#__codelineno-7-37">37</a></span>
<span class="normal"><a href="#__codelineno-7-38">38</a></span>
<span class="normal"><a href="#__codelineno-7-39">39</a></span>
<span class="normal"><a href="#__codelineno-7-40">40</a></span>
<span class="normal"><a href="#__codelineno-7-41">41</a></span>
<span class="normal"><a href="#__codelineno-7-42">42</a></span>
<span class="normal"><a href="#__codelineno-7-43">43</a></span>
<span class="normal"><a href="#__codelineno-7-44">44</a></span>
<span class="normal"><a href="#__codelineno-7-45">45</a></span>
<span class="normal"><a href="#__codelineno-7-46">46</a></span>
<span class="normal"><a href="#__codelineno-7-47">47</a></span>
<span class="normal"><a href="#__codelineno-7-48">48</a></span>
<span class="normal"><a href="#__codelineno-7-49">49</a></span>
<span class="normal"><a href="#__codelineno-7-50">50</a></span>
<span class="normal"><a href="#__codelineno-7-51">51</a></span>
<span class="normal"><a href="#__codelineno-7-52">52</a></span>
<span class="normal"><a href="#__codelineno-7-53">53</a></span>
<span class="normal"><a href="#__codelineno-7-54">54</a></span>
<span class="normal"><a href="#__codelineno-7-55">55</a></span>
<span class="normal"><a href="#__codelineno-7-56">56</a></span>
<span class="normal"><a href="#__codelineno-7-57">57</a></span>
<span class="normal"><a href="#__codelineno-7-58">58</a></span>
<span class="normal"><a href="#__codelineno-7-59">59</a></span>
<span class="normal"><a href="#__codelineno-7-60">60</a></span>
<span class="normal"><a href="#__codelineno-7-61">61</a></span>
<span class="normal"><a href="#__codelineno-7-62">62</a></span>
<span class="normal"><a href="#__codelineno-7-63">63</a></span>
<span class="normal"><a href="#__codelineno-7-64">64</a></span>
<span class="normal"><a href="#__codelineno-7-65">65</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-7-2" name="__codelineno-7-2"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-7-3" name="__codelineno-7-3"></a>
<a id="__codelineno-7-4" name="__codelineno-7-4"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-7-5" name="__codelineno-7-5"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-7-6" name="__codelineno-7-6"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-7-7" name="__codelineno-7-7"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>学生表<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<a id="__codelineno-7-8" name="__codelineno-7-8"></a>  <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;css/bootstrap.min.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-7-9" name="__codelineno-7-9"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-7-10" name="__codelineno-7-10"></a>
<a id="__codelineno-7-11" name="__codelineno-7-11"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-7-12" name="__codelineno-7-12"></a>  <span class="p">&lt;</span><span class="nt">h3</span><span class="p">&gt;</span>学生表<span class="p">&lt;/</span><span class="nt">h3</span><span class="p">&gt;</span>
<a id="__codelineno-7-13" name="__codelineno-7-13"></a>  <span class="p">&lt;</span><span class="nt">table</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;STUDENT&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;table&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-7-14" name="__codelineno-7-14"></a>    <span class="p">&lt;</span><span class="nt">thead</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;table-light&quot;</span><span class="p">&gt;</span>
<a id="__codelineno-7-15" name="__codelineno-7-15"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-check-input&quot;</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;select_all&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-7-16" name="__codelineno-7-16"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>学号<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-7-17" name="__codelineno-7-17"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>姓名<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-7-18" name="__codelineno-7-18"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>性别<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-7-19" name="__codelineno-7-19"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>年龄<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-7-20" name="__codelineno-7-20"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>所在系<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-7-21" name="__codelineno-7-21"></a>      <span class="p">&lt;</span><span class="nt">th</span><span class="p">&gt;</span>操作<span class="p">&lt;/</span><span class="nt">th</span><span class="p">&gt;</span>
<a id="__codelineno-7-22" name="__codelineno-7-22"></a>    <span class="p">&lt;/</span><span class="nt">thead</span><span class="p">&gt;</span>
<a id="__codelineno-7-23" name="__codelineno-7-23"></a>    <span class="p">&lt;</span><span class="nt">tbody</span><span class="p">&gt;</span>
<a id="__codelineno-7-24" name="__codelineno-7-24"></a>      <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-7-25" name="__codelineno-7-25"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-check-input&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-26" name="__codelineno-7-26"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>200215121<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-27" name="__codelineno-7-27"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>李勇<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-28" name="__codelineno-7-28"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>男<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-29" name="__codelineno-7-29"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>20<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-30" name="__codelineno-7-30"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>CS<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-31" name="__codelineno-7-31"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:void()&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary btn-sm&quot;</span> <span class="na">role</span><span class="o">=</span><span class="s">&quot;button&quot;</span><span class="p">&gt;</span>修改<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-32" name="__codelineno-7-32"></a>      <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-7-33" name="__codelineno-7-33"></a>      <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-7-34" name="__codelineno-7-34"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-check-input&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-35" name="__codelineno-7-35"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>200215122<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-36" name="__codelineno-7-36"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>刘晨<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-37" name="__codelineno-7-37"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>女<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-38" name="__codelineno-7-38"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>19<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-39" name="__codelineno-7-39"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>CS<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-40" name="__codelineno-7-40"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:void()&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary btn-sm&quot;</span> <span class="na">role</span><span class="o">=</span><span class="s">&quot;button&quot;</span><span class="p">&gt;</span>修改<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-41" name="__codelineno-7-41"></a>      <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-7-42" name="__codelineno-7-42"></a>      <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-7-43" name="__codelineno-7-43"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-check-input&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-44" name="__codelineno-7-44"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>200215123<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-45" name="__codelineno-7-45"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>王敏<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-46" name="__codelineno-7-46"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>女<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-47" name="__codelineno-7-47"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>18<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-48" name="__codelineno-7-48"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>MA<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-49" name="__codelineno-7-49"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:void()&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary btn-sm&quot;</span> <span class="na">role</span><span class="o">=</span><span class="s">&quot;button&quot;</span><span class="p">&gt;</span>修改<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-50" name="__codelineno-7-50"></a>      <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-7-51" name="__codelineno-7-51"></a>      <span class="p">&lt;</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-7-52" name="__codelineno-7-52"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;checkbox&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;form-check-input&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-53" name="__codelineno-7-53"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>200515125<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-54" name="__codelineno-7-54"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>张立<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-55" name="__codelineno-7-55"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>男<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-56" name="__codelineno-7-56"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>19<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-57" name="__codelineno-7-57"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;</span>IS<span class="p">&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-58" name="__codelineno-7-58"></a>        <span class="p">&lt;</span><span class="nt">td</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;javascript:void()&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;btn btn-primary btn-sm&quot;</span> <span class="na">role</span><span class="o">=</span><span class="s">&quot;button&quot;</span><span class="p">&gt;</span>修改<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">td</span><span class="p">&gt;</span>
<a id="__codelineno-7-59" name="__codelineno-7-59"></a>      <span class="p">&lt;/</span><span class="nt">tr</span><span class="p">&gt;</span>
<a id="__codelineno-7-60" name="__codelineno-7-60"></a>    <span class="p">&lt;/</span><span class="nt">tbody</span><span class="p">&gt;</span>
<a id="__codelineno-7-61" name="__codelineno-7-61"></a>  <span class="p">&lt;/</span><span class="nt">table</span><span class="p">&gt;</span>
<a id="__codelineno-7-62" name="__codelineno-7-62"></a>  <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;js/bootstrap.min.js&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<a id="__codelineno-7-63" name="__codelineno-7-63"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-7-64" name="__codelineno-7-64"></a>
<a id="__codelineno-7-65" name="__codelineno-7-65"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h2 id="6">6. 思考题</h2>
<ol>
<li>与直接使用CSS开发界面相比，框架的优势有那些？</li>
</ol>





                
              </article>
            </div>
          
          
  <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var tab,labels=set.querySelector(".tabbed-labels");for(tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>

        </div>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    <script id="__config" type="application/json">{"base": "..", "features": ["content.tabs.link", "navigation.expand", "navigation.sections", "navigation.path"], "search": "../assets/javascripts/workers/search.208ed371.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
    
    
      <script src="../assets/javascripts/bundle.efa0ade1.min.js"></script>
      
    
  </body>
</html>